$animation-duration: 0.3s;

/* 缓入 */
.tn-animation-fade-in {
  opacity: 0;
  animation: fadeInAnimation ease $animation-duration forwards;
}

/* 动画 start */
@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 动画 end */

/* 放大进入 */
.tn-animation-zoom-in {
  opacity: 0;
  transform: scale(0);
  animation: zoomInAnimation ease $animation-duration forwards;
}

/* 动画 start */
@keyframes zoomInAnimation {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 动画 end */
